<template>
  <el-card style="height: 150px;border-radius: 16px;">
    <h4 style="font-size:16px;margin:0;">系统公告</h4>
    <div class="noticeList">
      <div v-for="item in tableData" :key="item.id" class="noticeItem">
        <detail-link :id="item.id" :title="item.title" style="font-size:14px;" to="NoticeDetail" />
      </div>
    </div>
  </el-card>

</template>

<script>
import permission from '@/directive/permission/index.js'
import DetailLink from '@/components/DetailLink' // 权限判断指令
import { postData } from '@/api/common'

export default {
  name: 'CardNoticeList',
  components: { DetailLink },
  directives: { permission },
  data() {
    return {
      tableData: [],
      listQuery: {
        current: 1,
        size: 4,
        params: {
          title: ''
        }
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {

    fetchData() {
      postData('/api/sys/notice/paging', this.listQuery).then(res => {
        this.tableData = res.data.records
      })
    }
  }
}
</script>

<style scoped>
.noticeList {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.noticeItem {
  min-height: 32px;
  border-bottom: 1px dashed #cccccc;
  display: flex;
  align-items: center;
}
</style>
